<!--  -->
<template>
<div>
    <el-container>
  <el-header class="header">
    <h1>青花瓷书店</h1>
    <span class="user">
      <span v-if="userInfo.isLogin==true" class="TC">欢迎你，用户：{{userInfo.uname}}</span>
      <span v-else class="TC">登录{{userInfo.uname}}</span>
      <el-popover
        placement="top"
        width="160"
        v-model="visible"
        v-if="userInfo.isLogin==true"
        >
        <p>是否退出登录</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="UserOut">确定</el-button>
        </div>
        <span slot="reference" class="TC">退出登录</span>
      </el-popover>
    </span>
  </el-header>
  <el-container>
 
  
    <el-aside width="200px" style="height: 588px;" >
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
  <el-menu-item index="/index/BookQuery">
    <i class="el-icon-menu"></i>
    <span slot="title">查询图书</span>
  </el-menu-item>
  <el-menu-item index="/index/UserApply">
    <i class="el-icon-menu"></i>
    <span slot="title">预约登记</span>
  </el-menu-item>
  <el-menu-item index="/index/ApplyRecord">
    <i class="el-icon-document"></i>
    <span slot="title">预约记录</span>
  </el-menu-item>
  <el-menu-item index="/index/BorrowBooks">
    <i class="el-icon-setting"></i>
    <span slot="title">借阅记录</span>
  </el-menu-item>
  
</el-menu>
    </el-aside>
    <el-main class="conter">
      <router-view name="table"></router-view>
    </el-main>
  </el-container>
  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%">
  <span class="dialog">检测到您未登录<span>{{ count }}</span>s后将自动跳转到登录页！</span> 
  <span slot="footer" class="dialog-footer">
  </span>
</el-dialog>
</el-container>

</div>
</template>

<script>
export default {
data() {
return {
    tableData:[],
    pagecount:0,
    page:1,    
    visible: false,
    userInfo:{},
    dialogVisible: false,
    count:""
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
  // 判断登录状态
  let userInfo=JSON.parse(localStorage.getItem("userInfo")); //去除localStoreage中的登录状态
  // 如果登录状态为空则跳转到首页
  if(userInfo==null){
    // 路由跳转到首页
    this.dialogVisible=true
    this.timerGO()
  }
  if(userInfo.isLogin){
    this.userInfo=userInfo
  }
},
methods:{
  UserOut(){
      this.visible=false
      this.userInfo={}
      localStorage.clear()
      this.$store.state.userInfo={}
    this.dialogVisible=true
      this.timerGO()
  },
  timerGO(){
    const TIME_COUNT = 5;
		if(!this.timer){
			this.count = TIME_COUNT;
			this.show = false;
			this.timer = setInterval(()=>{
			if(this.count > 0 && this.count <= TIME_COUNT){
				this.count--;
			}else{
				this.show = true;
				clearInterval(this.timer);
				this.timer = null;
				//跳转的页面写在此处
				this.$router.push({
					path: '/'
				});
			}		  },1000)
		}
  }
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
    .header{
        text-align: center;
        margin: 30px;
        padding: 15px;
    }
    .conter{
        margin-left: 5%;
        position: relative;
    }
    .user{
      /* position:absolute; */
      float: right;
      margin-top: -30px;
      margin-right: 20px;
    }
    .TC{
      font-size: 14px;
      margin: 0 10px;
    }
    .dialog{
      font-size: 20px;
      /* color: aqua; */
      text-align: center;
    }
    .dialog span{
      font-size: 30px;
      color: red;
    }
</style>